<!-- 模块说明 -->
<template>
  <div>
    <div class="content">
      <!-- <el-button @click="exportPNG" type="primary"
        >导出PNG</el-button> -->
      <el-button @click="exportPDF" type="primary">导出成绩单</el-button>
      <div id="main-charts">
        <h1>{{ store.state.pdf.pdf.name }}</h1>
        <div style="display: flex">
          <p>试卷得分:{{ store.state.pdf.price }}</p>
          <p>试卷耗时:{{ store.state.pdf.pdf.suggestTime }}分</p>
          <p>提交人:student</p>
        </div>
        <div
          ref="text"
          v-for="(o, i) in titleList"
          :key="o"
          class="text item"
          style="font-size: 16px; padding-bottom: 30px; position: relative"
        >
          <p>{{ i + 1 }}&nbsp;&nbsp;{{ o.name }}</p>
          <p>题目：{{ o.questionItems[0].title }}</p>
          <p>分数：{{ o.questionItems[0].score }}</p>
          <div style="display: flex">
            <p
              style="font-size: 16px; margin-right: 20px"
              v-for="(item, i) in o.questionItems[0].items"
            >
              {{ i + 1 }}：&nbsp;{{ item }}
            </p>
          </div>
          <p>标答：{{ o.questionItems[0].correct }}</p>
          <p>用户答案：{{ o.questionItems[0].correctArray }}</p>
          <div class="demo-rate-block">
            <el-rate
              style="margin-left: 25px"
              v-model="o.questionItems[0].difficult"
            />
          </div>
          <div
            v-if="
              o.name !== '简答题' &&
              o.questionItems[0].correct !== o.questionItems[0].correctArray
            "
            style="
              padding: 5px;
              background-color: var(--el-color-danger-light-9);
              color: var(--el-color-danger);
              border: 1px solid var(--el-color-danger);
              width: 40px;
              text-align: center;
              border-radius: 5px;
              margin-left: 25px;
            "
          >
            错误
          </div>
          <div
            v-else-if="
              o.name !== '简答题' &&
              o.questionItems[0].correct == o.questionItems[0].correctArray
            "
            style="
              padding: 5px;
              background-color: var(--el-color-success-light-8);
              color: var(--el-color-success);
              border: 1px solid var(--el-color-success);
              width: 40px;
              text-align: center;
              border-radius: 5px;
              margin-left: 25px;
            "
          >
            正确
          </div>
          <div
            v-if="o.name == '简答题'"
            style="
              padding: 5px;
              background-color: var(--el-color-warning-light-9);
              color: var(--el-color-warning);
              border: 1px solid var(--el-color-warning);
              width: 50px;
              text-align: center;
              border-radius: 5px;
              margin-bottom: 10px;
              margin-left: 25px;
            "
          >
            待批改
          </div>
        </div>
        <p
          style="
            font-size: 120px;
            color: #f00;
            position: absolute;
            top: 100px;
            right: 200px;
          "
        >
          {{ store.state.pdf.price }}
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { ref } from "vue";
import html2canvas from "html2canvas";
import jsPDF from "jspdf";
import { useStore } from "vuex";
const store = useStore();
const titleList = store.state.pdf.pdf.titleItems;
// const exportPNG = () => {
//   const ele: HTMLElement | null = document.getElementById("main-charts");
//   html2canvas(ele as HTMLElement).then((canvas: any) => {
//     const contentWidth = canvas.width;
//     const contentHeight = canvas.height;
//     const ctx: any = canvas.getContext("2d");
//     // 添加水印
//     ctx.textAlign = "center";
//     ctx.textBaseline = "middle";
//     ctx.rotate((25 * Math.PI) / 180);
//     ctx.font = "20px Microsoft Yahei";
//     ctx.fillStyle = "rgba(184, 184, 184, 0.8)";
//     for (let i = contentWidth * -1; i < contentWidth; i += 240) {
//       for (let j = contentHeight * -1; j < contentHeight; j += 100) {
//         // 填充文字，x 间距, y 间距
//         // ctx.fillText("水印名", i, j);
//       }
//     }
//     const imgUrl = canvas.toDataURL("image/png");
//     const tempLink = document.createElement("a"); // 创建一个a标签
//     tempLink.style.display = "none";
//     tempLink.href = imgUrl;
//     tempLink.setAttribute("download", "文件名"); // 给a标签添加下载属性
//     if (typeof tempLink.download === "undefined") {
//       tempLink.setAttribute("target", "_blank");
//     }
//     document.body.appendChild(tempLink); // 将a标签添加到body当中
//     tempLink.click(); // 启动下载
//     document.body.removeChild(tempLink); // 下载完毕删除a标签
//     window.URL.revokeObjectURL(imgUrl);
//   });
// };

const exportPDF = () => {
  const ele: HTMLElement | null = document.getElementById("main-charts");
  html2canvas(ele as HTMLElement, {
    dpi: 96, // 分辨率
    scale: 3, // 设置缩放
    useCORS: true, // 允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。,
    // backgroundColor:'#ffffff',这样背景还是黑的
    bgcolor: "#ffffff", // 应该这样写
    logging: false, // 打印日志用的 可以不加默认为false
  }).then((canvas) => {
    const contentWidth = canvas.width;
    const contentHeight = canvas.height;
    // 一页pdf显示html页面生成的canvas高度;
    const pageHeight = (contentWidth / 592.28) * 841.89;
    // 未生成pdf的html页面高度
    let leftHeight = contentHeight;
    // 页面偏移
    let position = 0;
    // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
    const imgWidth = 595.28;
    const imgHeight = (595.28 / contentWidth) * contentHeight;
    const ctx: any = canvas.getContext("2d");
    // 添加水印
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.rotate((25 * Math.PI) / 180);
    ctx.font = "20px Microsoft Yahei";
    ctx.fillStyle = "rgba(184, 184, 184, 0.8)";
    for (let i = contentWidth * -1; i < contentWidth; i += 240) {
      for (let j = contentHeight * -1; j < contentHeight; j += 100) {
        // 填充文字，x 间距, y 间距
        ctx.fillText("2207-学之思", i, j);
      }
    }
    const pageData = canvas.toDataURL("image/jpeg", 1.0);
    const pdf = new jsPDF("", "pt", "a4");
    if (leftHeight < pageHeight) {
      // 在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
      pdf.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight);
    } else {
      // 分页
      while (leftHeight > 0) {
        pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
        leftHeight -= pageHeight;
        position -= 841.89;
        // 避免添加空白页
        if (leftHeight > 0) {
          pdf.addPage();
        }
      }
    }
    // 可动态生成
    pdf.save(`文件名.pdf`);
  });
};
</script>
<style lang="scss" scoped>
#main-charts {
  margin: 0 auto;
  h1 {
    text-align: center;
    font-size: 30px;
    font-weight: 400;
  }
  > div {
    font-size: 20px;
    margin-top: 20px;
    align-items: center;
    justify-content: center;
    p {
      margin: 0 30px;
    }
  }
}
.text {
  font-size: 14px;
  p {
    line-height: 30px;
  }
}

.item {
  margin-bottom: 18px;
}
.el-card {
  overflow: auto;
}
.box-card {
  width: 270px;
  font-size: 14px;
  height: calc(100vh - 120px);
  p {
    line-height: 25px;
  }
}
.box-card1 {
  width: 1400px;
  font-size: 14px;
  height: calc(100vh - 120px);
  p {
    line-height: 25px;
  }
}
.active {
  background-color: var(--el-color-success-light-8);
  color: var(--el-color-success);
  border: 1px solid var(--el-color-success);
}
</style>
